<!-- 必填信息 -->
<template>
  <div class="gl_contentBox gl_heightFull noPadding">
    <div class="form_content">
      <el-form
        ref="declareVO"
        v-loading="loading"
        :model="formdata"
        label-width="110px"
        size="small"
        :rules="formdata_Rules"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="9">
            <el-form-item label="学员姓名" required>
              <div v-if="handlerType !== 'inquiry'">
                <span>{{ student.name }}</span>
                <span v-if="!Boolean($route.query.registerStudentId)">
                  <el-button v-if="student.name ==='' || student.name ===undefined " icon="el-icon-circle-plus-outline" style="margin-left:20px" @click="addstudent()" />
                  <el-button v-else icon="el-icon-delete" style="margin-left:20px" @click="deletestudent()" />
                </span>
              </div>
              <div v-else>{{ student.name }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="学员头像">
              <div v-if="student.imagePath">
                <img class="upload_game_img" :src="getStaticPhotoUrl(student.imagePath)">
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" class="form_item">
            <el-form-item label="证件类型">
              <div>{{ idCardType }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" class="form_item">
            <el-form-item label="证件号码">
              <div>{{ student.idCardNumber }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="10" class="form_item">
            <el-form-item label="联系方式">
              <div>{{ student.phoneNumber }}</div>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <div>
            <el-col :span="12">
              <el-form-item label="会员费" prop="memberFeeTypeCode">
                <el-radio-group v-model="formdata.memberFeeTypeCode">
                  <el-radio :disabled="!!student.ctaMemberId" label="New" style="margin-right:60px">新增</el-radio>
                  <el-radio label="Renew">续费</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
        <el-row>
          <div>
            <el-col :span="10">
              <el-form-item label="会员号">

                <el-input v-if="handlerType !== 'inquiry'" v-model.trim="formdata.memberNumber" :disabled="formdata.memberFeeTypeCode==='New'" maxlength="20" clearable class="form_input" placeholder="会员号" />

              </el-form-item>
            </el-col>
            <el-col :span="5.5">
              <el-form-item label="到期时间" label-width="112px">
                <el-date-picker v-model="formdata.MemberExipry" class="form_input" :disabled="formdata.memberFeeTypeCode==='New'" type="date" value-format="yyyy-MM-dd" placeholder="请选择会员到期日" :clearable="false" style="width: 190%" />
              </el-form-item>
            </el-col>

          </div>
        </el-row>
        <el-row>
          <div style="display:flex">
            <span class="member">证件照</span>
            <span style="margin-top:10px">
              <upload-file
                v-if="handlerType !== 'inquiry'"
                ref="uploadFile"
                class="imgt_upload"
                :action="action"
                :show-file-list="false"
                :limit="1"
                file-type="file"
                format-file=".jpg,.jpeg,.png"
                :default-file-url="getStaticPhotoUrl(formdata.memberCardImage)"
                @uploadSuccess="photoSavePositive"
              />
              <div v-else class="imgt_upload no_pointer">
                <img v-if="formdata.memberCardImage" class="imgt_upload" :src="getStaticPhotoUrl(formdata.memberCardImage)">
              </div>
            </span>
          </div>
        </el-row>

        <el-row style="margin-top:6px">
          <el-col :span="9" class="form_item">
            <el-form-item label="缴费年限" prop="feeYear">
              <el-select v-if="handlerType !== 'inquiry'" v-model="formdata.feeYear" class="form_input" size="mini">
                <el-option v-for="(item, index) in 10" :key="item.code" :label="index+1" :value="index+1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="func_btn">
          <el-col :span="24" align="center">
            <el-button type="default" size="mini" @click="goBack()">取消</el-button>
            <el-button :loading="btn" type="primary" size="mini" @click="prevStep('declareVO')">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Addstudent ref="Addstudent" />
  </div>
</template>
<script>
import uploadFile from './uploadFileDialog';
import { api_POST_ClubFeeStudent, api_GET_ClubDuan, api_GET_ClubFee, api_GET_ClubFeeStudentId, api_PUT_ClubFeeStudentId } from '@/extend/api/hallswaggerApi/app.js';
import { CreateFeeStudentInput, Api_GET_ClubDuanQO } from '@/lib/form/hall/swaggerForm';
// import {
//   api_GET_EventsManagementRegisterId
// } from '@/extend/api/gameswaggerApi/app';
import { mapState, mapActions } from 'vuex';
import Addstudent from './addstudnet.vue';
export default {
  components: {
    uploadFile,
    Addstudent
  },
  props: {

    handlerType: { // 当前操作类型  新增(add) 编辑(edit)  查询(inquiry)
      type: String,
      required: false,
      default: 'add'

    }
  },
  data() {
    return {
      btn: false,
      otherfee: [],
      checked: false,
      duanList: [],
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      idCardType: '',
      studentId: '', // 会员资料id
      id: '', // 学员id
      student: {
        name: '',
        idCardNumber: '',
        idCardTypeCode: '',
        ctaMemberId: '',
        MemberExipry: ''
      }, // 学员数据
      imagesIndex: 0,
      dragging: null,
      radios: '3', // 单选按钮
      loading: false,
      formdata: new CreateFeeStudentInput(), // 表单数据
      formdata_Rules: { // 必填项
        feeYear: [
          { required: true, message: '缴费年限不能为空', trigger: 'change' }
        ],
        memberNumber: [
          { required: true, message: '会员号不能为空', trigger: 'blur' }
        ],
        memberFeeTypeCode: [
          { required: true, message: '会员费不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })

  },
  watch: {
    'formdata.memberFeeTypeCode': {
      handler(val) {
        if (val === 'Renew') {
          if (!this.$route.query.registerStudentId) {
            this.formdata.memberNumber = this.student.ctaMemberId;
            // this.formdata.ctaMemberExipry = this.student.ctaMemberExipry;
            this.$set(this.formdata, 'MemberExipry', this.student.ctaMemberExipry);
          }
        } else {
          this.formdata.memberNumber = '';
          this.$set(this.formdata, 'MemberExipry', '');
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getDuanList();
    this.getotherfee();
    this.formdata.feeYear = 1;
    if (this.$route.query.registerStudentId) {
      this.editstudent();
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 编辑下查询学员
    editstudent() {
      const _json = {};
      _json.IncludeRequest = true;
      _json.IncludeRegisterStudent = true;
      _json.IncludeDuanExamRequestDuans = true;
      api_GET_ClubFeeStudentId(this.$route.query.registerStudentId, _json).then(res => {
        console.log(res);
        this.student.name = res.registerStudent.name;
        this.student.idCardTypeCode = res.idCardTypeCode;
        this.getidCardTypeCode(res.idCardTypeCode);
        this.student.idCardNumber = res.idCardNumber;
        this.student.imagePath = res.avatarUrl;
        this.student.phoneNumber = res.phoneNumber;
        this.formdata.levelTypeCode = res.levelTypeCode;
        this.formdata.duanTypeCode = res.duanTypeCode;
        this.studentId = res.registerStudent.registerId;
        this.id = res.registerStudent.id;
        this.formdata.memberFeeTypeCode = res.memberFeeTypeCode;
        if (res.memberNumber) {
          this.student.ctaMemberId = res.memberNumber;
          this.formdata.memberFeeTypeCode = 'Renew';
        } else {
          this.formdata.memberFeeTypeCode = res.memberFeeTypeCode;
        }
        this.formdata.memberNumber = res.memberNumber;
        this.formdata.memberCardImage = res.memberCardImage;
        this.$set(this.formdata, 'MemberExipry', res.memberExipry);
        this.formdata.feeYear = res.feeYear;
        this.formdata.levelCertificateNo = res.levelCertificateNo;
        this.formdata.duanCertificateNo = res.duanCertificateNo;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取级段位列表
    getDuanList() {
      const qo = new Api_GET_ClubDuanQO();
      qo.IsEnabled = true;
      this.loading = true;
      api_GET_ClubDuan(qo).then(res => {
        this.duanList = res.items;
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取其他费用列表
    getotherfee() {
      const _json = {};
      _json.FeeTypeCode = 'Other';
      _json.IsEnabled = true;
      _json.IsExamRequired = true;
      api_GET_ClubFee(_json).then(res => {
        console.log(res);
        this.otherfee = res.items;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 删除学员
    deletestudent() {
      this.student = {};
      this.idCardType = '';
      this.formdata.memberFeeTypeCode = 'New';
      this.formdata.memberNumber = '';
      // this.formdata.MemberExipry = '';
      this.$set(this.formdata, 'MemberExipry', '');
    },
    getidCardTypeCode(res) {
      if (res === 'IdCard') {
        this.idCardType = '身份证';
      }
      if (res === 'Passport') {
        this.idCardType = '护照';
      }
      if (res === 'Officers') {
        this.idCardType = '军官证';
      }
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    photoSavePositive (fileUrl) {
      this.$set(this.formdata, 'memberCardImage', fileUrl.tempUrl);
    },
    // 打开添加考生窗口
    addstudent() {
      this.$refs.Addstudent.dialogEditVisible = true;
      this.$refs.Addstudent.gettablelist();
    },
    // 添加考生
    prevStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btn = true;
          this.formdata.feeRequestId = this.$route.query.id;
          this.formdata.registerStudentId = this.id;
          this.formdata.studentName = this.student.name;
          this.formdata.idCardTypeCode = this.student.idCardTypeCode;
          this.formdata.idCardNumber = this.student.idCardNumber;
          this.formdata.phoneNumber = this.student.phoneNumber;
          this.formdata.avatarUrl = this.student.imagePath;
          console.log(this.student.name === undefined || this.student.name === '');
          if (this.student.name === undefined || this.student.name === '') {
            this.$message({ type: 'warning', message: '请添加学生' });
            this.btn = false;
            return;
          }
          if (this.formdata.memberFeeTypeCode === 'Renew') {
            console.log(this.formdata.memberNumber);
            if (this.formdata.memberNumber === null || this.formdata.memberNumber === '') { this.$message({ type: 'warning', message: '请填写会员号' }); this.btn = false; return; }
          }
          if (this.$route.query.registerStudentId) {
            api_PUT_ClubFeeStudentId(this.$route.query.registerStudentId, this.formdata).then(res => {
              this.btn = false;
              this.$message({ type: 'success', message: '修改成功' });
              this.$router.go(-1);
            }, error => {
              this.btn = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          } else {
            api_POST_ClubFeeStudent(this.formdata).then(res => {
              this.$router.go(-1);
              this.btn = false;
              this.$message({ type: 'success', message: '添加成功' });
            }, error => {
              this.btn = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.form_input {
    width: 390px;
}
.radioMember {
  width: 681px;
  background: #F8F8F8;
  padding: 21px;
}
.radioMember>div:nth-of-type(2){
  margin-top: 14px;
}
.member {
  margin-left: 55px;
  margin-right: 26px;
      font-size: 14px;
    color: #606266;
    font-weight: 900;
}
  .upload_game_img {
    width: 80px;
    height: 112px;
    line-height: 102px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
    .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: top;
  }
    .upload_game_img.border {
    border: 1px dotted #DCDFE6;
  }
  .upload_game_img:hover {
    border-color: #409eff;
  }
  .upload_game_img_hover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  .upload_game_img_hover:hover{
    opacity: 1;
  }
  .upload_game_img_hover span{
    display: none;
    cursor: pointer;
    position: relative;
    font-size: inherit;
    color: inherit;
  }
  .upload_game_img_hover span+span{
    margin-left: 15px;
  }
  .upload_game_img_hover:hover span{
    display: inline-block;
  }
    .changgeIMgBtn{
    position: absolute;
    height: 25px;
    bottom: -5px;
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }
    .imgt_upload {
    width: 92px;
    height: 92px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
  }
  .imgt_upload.no_pointer {
    cursor: default;
  }
  .imgt_upload:hover {
    border-color: #409EFF;
  }
  /* ::v-deep .formrules .el-form-item__error {
    left: 182px;
  } */
    ::v-deep .table_teach .el-table__header-wrapper  .el-checkbox{
  display:none;
}
.member_title {
  font-size: 14px;
  color: #474749;
  font-weight: 600;
}
.member_nav {
    font-size: 14px;
  color: #606266;
  font-weight: 400;
}
</style>
